<template>
  <div ref="main2" id="main" style="width: 100%; height: 100%"></div>
</template>

<script>
export default {
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      // let myChart = this.$echarts.init(document.getElementById("main"));
      let myChart = this.$echarts.init(this.$refs.main2);
      let pixelSeries = [];
      // 指定图表的配置项和数据
      let option = {
        grid: {
          top: "25%",
          bottom: "12%", //也可设置left和right设置距离来控制图表的大小
          right: "10%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
            },
          },
        },
        legend: {
          type: "scroll",
          itemWidth: 10,
          itemHeight: 10,

          data: ["纳税额", "利润额", "平均资产负债率", "平均净资产收益率"],
          top: "5%",

          padding: [0, 0],
          itemGap: 23,
          textStyle: {
            color: "#FFFFFF",
          },
        },
        xAxis: {
          data: ["2018", "2019", "2020",'2021','2022','2023'],
          axisLine: {
            show: true,
            // color:"red",
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#3AC2F9", //X轴文字颜色
            },
          },
        },
        yAxis: [
          {
            type: "value",
            name: "",
            nameTextStyle: {
              color: "#3AC2F9",
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#62779F",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#3AC2F9",
              },
            },
          },
          {
            type: "value",
            name: "",
            nameTextStyle: {
              color: "#3AC2F9",
            },
            position: "right",
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#3AC2F9",
              },
            },
          },
          {
            type: "value",
            gridIndex: 0,
            min: 50,
            max: 100,
            splitNumber: 8,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitArea: {
              show: false,
              areaStyle: {
                color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
              },
            },
          },
        ],
        series: [
          {
            name: "纳税额",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              normal: {
                color: "#00CCF9",
              },
            },
            data: [200, 225, 260],
          },
          {
            name: "利润额",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              normal: {
                color: "#B130EF",
              },
            },
            data: [200, 225, 260,200,240,190],
          },
          {
            name: "平均资产负债率",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            showAllSymbol: true, //显示所有图形。
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
            itemStyle: {
              //折线拐点标志的样式
              color: "#0084FF",
              borderWidth: "2",
              borderColor: "#0084FF",
            },
            lineStyle: {
              color: "#0084FF",
            },
            data: [65, 80, 90,130,100,90],
          },
        //   {
        //     name: "平均净资产收益率",
        //     type: "line",
        //     yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        //     showAllSymbol: true, //显示所有图形。
        //     symbol: "circle", //标记的图形为实心圆
        //     symbolSize: 6, //标记的大小
        //     itemStyle: {
        //       //折线拐点标志的样式
        //       color: "#B130EF",
        //       borderWidth: "2",
        //       borderColor: "#B130EF",
        //     },
        //     lineStyle: {
        //       color: "#B130EF",
        //     },
        //     data: [75, 30, 70],
        //   },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style></style>
